<template>
  <view
    class="bi-order-card"
    :class="{ 'is-progress': data.orderStatus === 1 }"
    @click="handleClick">
    <view class="bi-order-card__body">
      <view class="bi-order-card__fields">
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">{{rentalTypeName}}名称：</text>
          <text class="bi-order-card__field-target">
            {{ data.warehouseName || ''}}
          </text>
        </view>

        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">位置：</text>
          <text class="bi-order-card__field-target">
            {{ data.warehouseLocation || ''}}
          </text>
        </view>
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">{{rentalTypeName}}面积：</text>
          <text class="bi-order-card__field-target">
            {{ data.warehouseArea || '未填写' }} m³
          </text>
        </view>
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">创建人：</text>
          <text class="bi-order-card__field-target">
            {{ data.createName|| '' }}
          </text>
        </view>
        <view class="bi-order-card__field">
          <text class="bi-order-card__field-label">创建时间：</text>
          <text class="bi-order-card__field-target">
            {{ sub5Hours(data.createTime) || '' }}

          </text>
        </view>

        <view v-if="baldiyaLicenceExpiryDateFlag || warehouseContractExpireTimeFlag ||civilDefenceExpiryDateFlag || civilDefenceExpiryDateFlag || waterPayExpireTimeFlag || electPayExpireTimeFlag || internetPayExpireTimeFlag" style="margin-left: -10rpx;margin-right: -10rpx;border: 1rpx #f47554 solid;border-radius: 10rpx;padding: 5rpx 10rpx;  box-shadow: 4px 4px 6px #f47554;
">
          <view class="bi-order-card__field" v-if="warehouseContractExpireTimeFlag">
            <text class="bi-order-card__field-expire">
              <text style="color: #000000;">合同过期日期是</text>
              <text style="color: #f47554;">{{ sub5Hours(data.warehouseContractExpireTime) || ''}}</text>
              <text style="color: #000000;">，请及时续费！</text>
            </text>
          </view>

          <view class="bi-order-card__field" v-if="warehousePayExpireTimeFlag">
            <text class="bi-order-card__field-expire">
              <text style="color: #000000;">付款到期日期是</text>
              <text style="color: #f47554;">{{ sub5Hours(data.warehousePayExpireTime) || ''}}</text>
              <text style="color: #000000;">，请及时续费！</text>
            </text>
          </view>

          <view class="bi-order-card__field" v-if="waterPayExpireTimeFlag">
            <text class="bi-order-card__field-expire">
              <text style="color: #000000;">水费最晚付款日期是</text>
              <text style="color: #f47554;">{{ data.waterBillPayDate || ''}}</text>
              <text style="color: #000000;">号，请及时付费！</text>
            </text>
          </view>

          <view class="bi-order-card__field" v-if="electPayExpireTimeFlag">
            <text class="bi-order-card__field-expire">
              <text style="color: #000000;">电费最晚付款日期是</text>
              <text style="color: #f47554;">{{ data.electricityBillPayDate|| ''}}</text>
              <text style="color: #000000;">号，请及时付费！</text>
            </text>
          </view>


          <view v-if="internetPayExpireTimeFlag">
            <view v-if="internetPayExpireTimeFlag">
              <view class="bi-order-card__field" v-for="(bill, index) in expireInternetBills" :key="index">
                <text class="bi-order-card__field-expire">
                  <text style="color: #000000;">网费号码</text>
                  <text style="color: #f47554;">{{ (bill.internetBillPayNo || '').length > 10 ? (bill.internetBillPayNo || '').substring(0, 10) + '...' : (bill.internetBillPayNo || '') }}</text>
                  <text style="color: #000000;">的提醒日期是</text>
                  <text style="color: #f47554;">{{ bill.maintenanceTime || ''}} 号</text>
                  <text style="color: #000000;">，请及时付费！</text>
                </text>
              </view>
            </view>
          </view>


          <view class="bi-order-card__field" v-if="baldiyaLicenceExpiryDateFlag">
            <text class="bi-order-card__field-expire">
              Baldiya Licence的过期日期是{{ sub5Hours(data.baldiyaLicenceExpiryDate) || ''}}，请及时更新！
            </text>
          </view>
          <view class="bi-order-card__field" v-if="civilDefenceExpiryDateFlag">
            <text class="bi-order-card__field-expire">
              Civil Defence 过期日期是{{ sub5Hours(data.civilDefenceExpiryDate)  || ''}}，请及时更新！
            </text>
          </view>
        </view>
      </view>
      <view class="bi-order-card__toolbar" v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { sub5Hours,isLessThanOrEqualToEndOfNextMonth,isGreaterThanCurrentDay} from '@/apis/order.js';

export default {
  name: 'BiCangkuCard',
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    currentTimeType: {
      type: Number,
      default:null
    }
  },
  computed: {
    warehouseContractExpireTimeFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.warehouseContractExpireTime)
    },
    baldiyaLicenceExpiryDateFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.baldiyaLicenceExpiryDate)
    },
    civilDefenceExpiryDateFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.civilDefenceExpiryDate)
    },
    warehousePayExpireTimeFlag(){
      return isLessThanOrEqualToEndOfNextMonth(this.data.warehousePayExpireTime)
    },
    waterPayExpireTimeFlag(){
      return isGreaterThanCurrentDay(this.data.waterBillPayDate)
    },
    electPayExpireTimeFlag(){
      return isGreaterThanCurrentDay(this.data.electricityBillPayDate)
    },
    internetPayExpireTimeFlag(){
      return this.checkAnyGreaterThanCurrentDay(this.data.internetBillList)
    },
    rentalTypeName(){
      return this.data.rentalType ==='1'? '仓库' : this.data.rentalType ==='2'? '住房' : '办公室'
    }
  },
  data() {
    return {
      expireInternetBills: []
    }
  },
  methods: {
    checkAnyGreaterThanCurrentDay(dataList) {
      // 清空之前的过期项目列表
      this.expireInternetBills = [];

      // 检查是否有任何项目需要提醒
      dataList.forEach(item => {
        const isExpired = isGreaterThanCurrentDay(item.maintenanceTime);
        // 如果需要提醒，则添加到过期项目列表中
        if (isExpired) {
          this.expireInternetBills.push(item);
        }
      });

      // 返回是否有过期项目
      return this.expireInternetBills.length > 0;
    },
    isLessThanOrEqualToEndOfNextMonth(billList) {
      return isLessThanOrEqualToEndOfNextMonth(day)
    },
    sub5Hours(currentTime){
      return sub5Hours(currentTime)
    },
    handleClick() {
      this.$emit('click');
    }
  }
};
</script>

<style lang="less">
.bi-order-card {
  margin: 16px;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  line-height: 1.7em;
  text.is-light {
    color: #f47554;
  }
  &.is-progress {
    .bi-order-card__demand {
      color: #f47554;
    }
  }
  box-shadow: 5rpx 5rpx 8rpx #bfbfbf;

}
.bi-order-card__demand,
.bi-order-card__company {
  font-size: 16px;
  font-weight: bold;
  float: right;

}
.bi-order-card__linkman {
  font-size: 12px;
  color: #666;
}
.bi-order-card__head {
  border-bottom: 1px solid #e3e5e5;
  padding-bottom: 41rpx;
  margin-bottom: 41rpx;
}
.bi-order-card__field {
  display: flex;
  justify-content: space-between; /* 在子元素之间分配空间 */
  width: 100%; /* 确保容器宽度 */
  border-bottom: 1rpx solid #e3e5e5;
}
.bi-order-card__field-label {
  font-weight: bold;
  text-align: left; /* 可选，通常不需要，因为 flexbox 已处理 */
  width: 70%;
}
.bi-order-card__toolbar {
  padding: 4px 0;
}
.bi-order-card__main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.bi-order-card__addon {
  padding-bottom: 3px;
}
.bi-order-card__notfilled {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 4px;
}
.bi-order-card__notfilled-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: -1px;
}
.bi-order-card__notfilled-text {
  color: #f00;
}
.bi-order-card__field-target{
  word-wrap: break-word;
  width: 100%;
  text-align: right;

}
.bi-order-card__field-expire{
  word-wrap: break-word;
  width: 100%;
  color: #f47554;
  font-size: 24rpx;
}
</style>
